<template>
<div id="goods-params">
    <div 
        v-for="item in newParamsList"
        :key='item.attr_id'
    >
        <h3 class="goods-params-title">{{item.attr_name}}</h3>
        <form class="form-inp-checkbox">
            <label 
                v-for="vals in item.vals_arr"
                :key='vals.key'
                :for='vals.key' 
                class='item-inp-checkbox'
                @click="handleClickDeleteThisBox(item.vals_arr, vals)"
            >
                <input 
                    type='checkbox' 
                    :name='vals.key' 
                    :id='vals.key' 
                    checked
                >
                <span>{{vals.vals}}</span>
            </label>
        </form>
    </div>
</div>
</template>

<script>
import { getGoodsCateAttr } from '../../config/data'
export default {
    name: 'goodsParams',
    props: ['goodsinfo'],
    data() {
        return {
            paramsList: []
        }
    },
    created() {
        this.getGoodsCateAttrList()
    },
    methods: {
        handleClickDeleteThisBox(arr, vals) {
            arr.forEach((item, index) => {
                if(item.key === vals.key && item.vals === vals.vals) {
                    arr.splice(index, 1)
                }    
            });
        },
        async getGoodsCateAttrList() {
            const { cateId } = this.goodsinfo
            let result = await getGoodsCateAttr({cid: cateId, sel: 'many'})
            this.paramsList = result.data.list
        }
    },
    computed: {
        newParamsList() {
            this.$emit('update:goodsinfo', { paramList: this.paramsList })
            let list = this.paramsList.filter(item => item.attr_vals !== 'ffff')
            list = list.map(pl => {
                let vals = JSON.parse(JSON.stringify(pl.attr_vals))
                let valsArr = vals.split(',')
                pl['vals_arr'] = valsArr.map(item => {
                    let obj = {}
                    obj['vals'] = item
                    obj['key'] = 'abcdefghijklmnopqrstuvwxyz'.split('')
                                    .sort(_ => Math.random() - 0.5)
                                    .join('')
                    return obj
                })
                return pl;
            })
            return list;
        }
    },
}
</script>

<style scoped>
#goods-params {
    height: 100%;
}
.goods-params-title {
    height: 50px;
    line-height: 50px;
}
.form-inp-checkbox {
    display: flex;
    flex-wrap: wrap;
}
.item-inp-checkbox {
    margin: 6px;
    padding: 3px 6px;
    border: 1px solid #108df3;
    border-radius: 4px;
    color: #108df3;
}
</style>